<template>
	<!-- 固定在顶部的导航栏 -->
	<el-menu :default-active="activeIndex" class="top-navbar" mode="horizontal" @select="handleSelect"
		background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :style="{ height: navHeight }">

		<el-menu-item index="1">
			<RouterElLink to="/login">登录</RouterElLink>
		</el-menu-item>
		<el-menu-item index="2">
			<el-button type="warning" @Click="logout">登出</el-button>
		</el-menu-item>
		<el-menu-item index="3">
			<el-input v-model="searchKeyWord" style="width: 240px" placeholder="Please Input"
				@keyup.enter="handleSearch">
				<template #prefix>
					<el-icon>
						<i-ep-Search />
					</el-icon>
				</template>
			</el-input>
		</el-menu-item>
	</el-menu>
</template>

<script setup lang="ts">
import RouterElLink from '@/components/RouterElLink.vue';
import router from '@/router';
import { BlogSearchType } from '@/types/serchType';
import { clearUserInfo } from '@/utils/persistUtils';
import { clearAuth } from '@/utils/tokenAxiosUtils';
import { ref } from 'vue';

// 使用 ref 来管理 activeIndex
const activeIndex = ref('1');

// 定义 navHeight
const navHeight = ref('8vh');

const searchKeyWord = ref('');

// 定义 handleSelect 方法
const handleSelect = (key: any, keyPath: any) => {
	console.log('选中的菜单项:', key, keyPath);
};

// 暴露 navHeight 给父组件
defineExpose({
	navHeight
});

const logout = () => {
	clearAuth();
	clearUserInfo();
}

// 新增 handleSearch 方法
const handleSearch = () => {
	console.log('搜索关键词:', searchKeyWord.value);
	router.push({
		name: 'Home',
		query: {
			searchType: BlogSearchType.GetSearch,
			searchKeyWord: searchKeyWord.value,
		}
	});
}
</script>

<style scoped>
/* 固定导航栏样式 */
.top-navbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
}
</style>